<template>
  <div>
    <header class="nav">
      <nav class="h">
        <div class="containers">
          <div class="s_justify_content s_flex s_align_items h">
            <div class="h_logo">
              <router-link to="/web/home" class="s_flex s_align_items">
              <img src="../../../public/logo3.png" alt="" />
              </router-link>
            </div>
            <ul class="s_nav_ul s_flex s_flex s_align_items xs">
              <li v-for="(item, index) in list" :key="index" class="">
                <!-- <router-link
                  tag="span"
                  :to="item.path"
                  :class="$route.path == item.path ? 'active' : ''"
                  >{{ item.menu }}</router-link
                > -->
              </li>
            </ul>
            <div class="lg" @click="active = true">
              <i class="iconfont icon-toggle"></i>
            </div>
          </div>
        </div>
      </nav>
    </header>
    <div class="m_menu" v-if="active">
      <ul class="lg">
        <li v-for="(item, index) in list" :key="index" class="">
          <!-- <router-link
            tag="span"
            :to="item.path"
            :class="$route.path == item.path ? 'active' : ''"
            >{{ item.menu }}</router-link
          > -->
        </li>
      </ul>
    </div>
    <div class="intorval" v-if="active" @click="active = false"></div>
  </div>
</template>


<script>
export default {
  data() {
    return {
      list: [
        {
          id: 1,
          menu: "首  页",
          path: "/web/home",
        },
        {
          id: 2,
          menu: "政策资讯",
          path: "/web/news",
        },
        {
          id: 3,
          menu: "活动新闻",
          path: "/web/activities",
        },
        {
          id: 4,
          menu: "双家工程",
          path: "/web/engineering",
        },
        {
          id: 5,
          menu: "海外维权",
          path: "/web/protection",
        },
        {
          id: 6,
          menu: "顺德智造",
          path: "/web/manufacturing",
        },
        {
          id: 7,
          menu: "顺德荣誉",
          path: "/web/honor",
        },
      ],
      active:false
    };
  },
  methods: {
  },
};
</script>

<style lang="less" scope>
.nav {
  position: sticky;
  top: 0;
  left: 0;
  z-index: 10;
  height: 100px;
  line-height: 100px;
}
.s_nav_ul {
  width: 67%;
}
.h_logo {
  width: 20%;
}
.h_logo img {
  width: 200px;
}
.s_nav_ul li {
  width: calc(100% / 7);
  text-align: center;
  span {
    display: block;
    cursor: pointer;
  }
}
.nav .active {
  background: #0f6ac7;
  color: #fff;
}
.h {
  height: 100px;
  line-height: 100px;
}

@media (max-width: 750px) {
  .h_logo {
    width: 50%;
    img {
      width: 100%;
    }
  }
  .iconfont {
    font-size: 25px;
    // color: #999;
  }
  .m_menu {
    position: fixed;
    width: 70%;
    height: 100%;
    right: 0;
    top: 0;
    z-index: 12;
    background: #fff;
    overflow-y: scroll;
  }
  .intorval {
    background-color: #000;
    height: 100%;
    left: 0;
    opacity: 0.5;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 11;
  }
  .m_menu {
    padding: 0 15px;
    li {
      margin-top:20px;
      padding-bottom:20px;
      border-bottom:1px solid #dbdbdb;
    }
  }
  .h,.nav{
    height:80px;
    line-height: 80px;
}
}
</style>